<script lang="ts">
export default {
  name: 'Study8SonDemo1'
}
</script>

<template>
  <div>
    <p>绑定的值(props):{{ props.mVal }}</p>
    <button type="button" @click="editmVal">修改props的值</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['mVal'])
const emit = defineEmits(['update:mVal'])

const editmVal = () => {
  // 1. 子组件无法直接修改Props传过来的值
  // props.mVal = 222  //无法为“mVal”赋值，因为它是只读属性

  // 2. 可以把需要修改的值通过emit直接穿回父组件，在父组件中实现修改
  emit('update:mVal', 222)
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
